<!DOCTYPE html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Katen - Minimal Blog & Magazine HTML Theme</title>
<meta name="description" content="Katen - Minimal Blog & Magazine HTML Theme">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" type="image/x-icon" href="source/images/favicon.png">
<!-- STYLES -->
<link rel="stylesheet" href="/source/css/bootstrap.min.css" type="text/css" media="all">
<link rel="stylesheet" href="/source/css/all.min.css" type="text/css" media="all">
<link rel="stylesheet" href="/source/css/slick.css" type="text/css" media="all">
<link rel="stylesheet" href="/source/css/simple-line-icons.css" type="text/css" media="all">
<link rel="stylesheet" href="/source/css/style.css" type="text/css" media="all">
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->
</head>
<body >
<!-- preloader -->
<div id="preloader">
  <div class="book">
    <div class="inner">
      <div class="left"></div>
      <div class="middle"></div>
      <div class="right"></div>
    </div>
    <ul>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
  </div>
</div>
<!-- site wrapper -->
<div id="App">
  <keep-alive>
    <router-view :key="key" />
  </keep-alive>
</div>

<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script>
<script src="https://unpkg.com/http-vue-loader"></script>
<script src="https://unpkg.com/vue-router@3.0.1/dist/vue-router.js"></script>
<script src="https://cdn.bootcss.com/qs/6.7.0/qs.min.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/axios/0.21.1/axios.min.js"></script>
<script src="/source/js/jquery.min.js"></script>
<script src="/source/layer/layer.js"></script>
<script src="/source/js/core.js"></script>
<script src="/source/js/popper.min.js"></script>
<script src="/source/js/bootstrap.min.js"></script>
<script src="/source/js/slick.min.js"></script>
<script src="/source/js/jquery.sticky-sidebar.min.js"></script>
<script src="/source/js/custom.js"></script>
<script type="module">
  const guestbook = httpVueLoader('./views/guestbook.vue');
  const home = httpVueLoader('./views/home.vue');
  const blog = httpVueLoader('./views/blog.vue');
  const article = httpVueLoader('./views/article.vue');
  const search = httpVueLoader('./views/search.vue');
  new Vue({
    el:'#App',
    data() {
      return {
      }
    },
    router:new VueRouter({
      //mode: 'history',
      routes:[
       // {path:'/',redirect:'/home'}, // 这个表示会默认渲染
        {path:'/',component:home},
        {path:'/blog/category/:categoryId',component:blog},
        {path:'/blog/tag/:tagId',component:blog},
        {path:'/article/:id',component:article},
        {path:'/guestbook',component:guestbook},
        {path:'/search',component:search}
      ]
    }),
    computed:{
      key(){
        return this.$route.path + Math.random();
      }
    },
    methods: {

    }
  });
</script>
</body>
</html>
